<!DOCTYPE html>
<html lang="en"  xmlns:th="http://www.thymeleaf.org" >
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>MyStore | 一站式应用解决方案</title>
    <!-- 引入 Bootstrap 样式库 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css">
    <!-- 引入自定义样式 -->
    <style>
        .col a{
            text-decoration: none;
            color: black;
        }
        .disabled {
            /* 添加禁用按钮的样式 */
            color: gray;
            opacity: 0.6;
            pointer-events: none; /* 禁止点击 */
        }

    </style>
</head>
<body>
<!-- 导航栏 -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="container-fluid">
        <a class="navbar-brand" th:href="@{/}">MyStore</a>
        <!-- 搜索框 -->
        <form class="d-flex" method="get" th:action="@{/console/app/search.do}">
            <input class="form-control form-control-lg" type="search" th:value="${data}" name="data" placeholder="搜索应用" aria-label="Search">
            <button class="btn btn-primary" type="submit">搜索</button>
        </form>
        <!-- 用户图标 -->
        <a href="" th:href="@{/console/user/userCenter.do(userId=*{session.userId})}" onclick="">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-person" viewBox="0 0 16 16">
                <path d="M8 8.112a2.112 2.112 0 1 1 0-4.224 2.112 2.112 0 0 1 0 4.224zm0 1.063c-2.08 0-6.4 1.052-6.4 3.168V14h12.8v-1.657c0-2.116-4.32-3.168-6.4-3.168z"/>
                <path fill-rule="evenodd" d="M8 9a3 3 0 1 1 0-6 3 3 0 0 1 0 6zm0-1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3z"/>
            </svg>
        </a>
    </div>
</nav>
<!-- 推荐应用 -->
<div class="container my-4">
    <h3 class="fw-bold mb-3">搜索结果</h3>
    <div class="row row-cols-1 row-cols-md-2 row-cols-lg-4 g-4" >
        <!-- 推荐应用块 -->
        <div class="col" th:each="app:${apps.records}">
            <a th:href="@{/console/app/info.do(appId=${app.appId})}">
                <div class="card h-100">
                    <img src="" style="width: 300px;height:300px" th:src="@{/console/file/image.do(fileModelId=${app.appIcon})}" class="card-img-top" alt="">
                    <div class="card-body">
                        <h5 class="card-title" th:text="${app.appName}"></h5>
                        <p class="card-text" th:text="${app.appDescription}"></p>
                    </div>
                </div>
            </a>
        </div>
        <!-- 在此处插入更多推荐应用块 -->
    </div>
    <!-- 分页按钮 -->
    <nav class="fixed-bottom bg-light p-3" aria-label="Page navigation">
        <div id="pagination">
            <a th:href="@{/console/app/search.do(data=${data},current=1)}" th:class="${apps.current == 1} ? disabled : ''">首页</a>
            <a th:href="@{/console/app/search.do(data=${data},current=${apps.start+-1})}" th:class="${apps.start == 1} ? disabled : ''">前一页</a>
            <!-- 显示中间页码 -->
            <span th:each="pageNumber : ${#numbers.sequence(apps.start, apps.end)}">
            <a th:href="@{/console/app/search.do(data=${data},current=${pageNumber})}" th:class="${pageNumber == apps.current} ? active : ''" th:text="${pageNumber}"></a>
            </span>
            <a th:href="@{/console/app/search.do(data=${data},current=${apps.next})}" th:class="${(apps.current == apps.getPages())||(apps.next<apps.current+5)} ? disabled : ''">后一页</a>
            <a th:href="@{/console/app/search.do(data=${data},current=${apps.getPages()})}" th:class="${apps.current == apps.getPages()} ? disabled : ''">末页</a>
        </div>
    </nav>

</div>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<!-- 引入 Bootstrap JavaScript 库 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

